<!-- 清单抽屉组件 -->
<template>
  <view class="list-drawer-container">
    <!-- 统一遮罩层管理 -->
    <view class="custom-mask" 
          v-if="visible && !showActions && !showGroupActionsPopup && !showGroupPopup" 
          @click="onClose"></view>
    
    <!-- 操作菜单专用遮罩层 -->
    <view class="action-mask" v-if="showGroupActionsPopup || showActions" 
          @click="hideActivePopup"></view>
    
    <!-- 分组弹窗专用遮罩层 -->
    <view class="popup-mask" v-if="showGroupPopup" @click="hideGroupPopup"></view>
    
    <u-popup :show="visible" mode="left" @close="onClose" @open="onOpen" 
           :overlay="false" :z-index="100" 
           :close-on-click-overlay="false" :safe-area-inset-bottom="true">
      <view class="drawer-container">
        <view class="status_bar" />
        <view class="drawer-header">
          <text class="drawer-title">任务清单</text>
        </view>
        <scroll-view scroll-y class="drawer-content">
          <!-- 清单列表 -->
          <view class="list-container" v-for="list in lists" :key="list.id">
            <view class="list-item" 
                  :class="{'list-item-active': list.id === currentListId}" 
                  @click="toggleListExpand(list)"
                  @longpress="showListActions(list)">
              <view class="list-icon-box">
                <view class="list-icon-wrapper" :style="getListIconStyle(list)">
                  <u-icon :name="list.icon || 'tags'" size="18" color="#ffffff"></u-icon>
                </view>
                <u-icon 
                  :name="listExpandedMap[list.id] ? 'arrow-down' : 'arrow-right'" 
                  size="14" 
                  :color="list.id === currentListId ? '#4285f4' : '#999'"
                ></u-icon>
              </view>
              <view class="list-info">
                <text class="list-title" :class="{'list-title-active': list.id === currentListId}">{{ list.title }}</text>
                <view class="list-count-wrapper">
                  <text class="list-count">{{ getListCompletedCount(list.id) }}/{{ getListTotalCount(list.id) }}</text>
                </view>
              </view>
            </view>
            
            <!-- 分组列表 -->
            <view class="group-container" v-if="listExpandedMap[list.id] && list.groups && list.groups.length">
              <view class="group-item" 
                    v-for="group in list.groups" 
                    :key="group.id"
                    :class="{'group-item-active': group.id === currentGroupId}"
                    @click.stop="selectGroup(list.id, group.id)"
                    @longpress.stop="showGroupActions(list.id, group)">
                <view class="group-icon-box">
                  <u-icon name="calendar" size="16" :color="group.id === currentGroupId ? '#4285f4' : '#666'"></u-icon>
                </view>
                <view class="group-info">
                  <text class="group-title" :class="{'group-title-active': group.id === currentGroupId}">{{ group.name }}</text>
                  <view class="group-count-wrapper">
                    <text class="group-count">{{ getGroupCompletedCount(group.id) }}/{{ getGroupTotalCount(group.id) }}</text>
                  </view>
                </view>
              </view>
              
              <!-- 添加分组按钮 -->
              <view class="add-group-item" @click.stop="showAddGroupPopup(list.id)">
                <u-icon name="plus" size="16" color="#999"></u-icon>
                <text class="add-group-text">添加分组</text>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="drawer-footer">
          <view class="add-list-btn" @click="showAddListPopup">
            <u-icon name="plus" size="20" color="#ffffff"></u-icon>
            <text class="add-list-text">新建清单</text>
          </view>
        </view>
      </view>
    </u-popup>
    
    <!-- 清单操作菜单 -->
    <list-actions 
      :show="showActions" 
      :list="currentActionList || {}"
      @close="hideListActions"
      @edit="editList"
      @add-group="addGroup"
      @delete="onDeleteList"
    />
    
    <!-- 分组操作菜单 -->
    <group-actions
      :show="showGroupActionsPopup"
      :group="currentActionGroup || {}"
      @close="hideGroupActions"
      @edit="editGroup"
      @delete="onDeleteGroup"
    />
    
    <!-- 清单弹窗组件 -->
    <simple-list-modal
      :visible="showListPopup"
      :listData="currentEditList"
      :isEdit="isEditMode"
      :closeOnClickMask="false"
      @cancel="hideListPopup"
      @submit="submitListForm"
    />
    
    <!-- 分组弹窗组件 -->
    <u-popup :show="showGroupPopup" mode="center" @close="hideGroupPopup" :closeable="true" :closeOnClickOverlay="false" :border-radius="10" :overlay="false" :z-index="1001">
      <view style="padding: 20px; background-color: #fff; width: 80vw;">
        <view style="padding: 10px 0; border-bottom: 1px solid #eee; margin-bottom: 15px;">
          <text style="font-size: 18px; font-weight: bold;">{{ isGroupEditMode ? '编辑分组' : '新建分组' }}</text>
        </view>
        <view style="padding: 10px 0;">
          <view style="margin-bottom: 10px;">
            <text style="font-size: 14px; color: #666;">分组名称</text>
          </view>
          <input v-model="groupFormData.name" style="border: 1px solid #eee; padding: 10px; margin-bottom: 20px; width: 100%;" placeholder="请输入分组名称" />
          <view style="display: flex; flex-direction: column;">
            <button style="background-color: #2979ff; color: #fff; padding: 10px; border-radius: 5px; margin-bottom: 10px;" @click="submitGroupForm">{{ isGroupEditMode ? '保存修改' : '创建分组' }}</button>
            <button style="background-color: #f8f8f8; color: #333; padding: 10px; border-radius: 5px;" @click="hideGroupPopup">取消</button>
          </view>
        </view>
      </view>
    </u-popup>
    
    <!-- 使用uView的提示组件 -->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import ListActions from './list/ListActions.vue';
import SimpleListModal from './list/SimpleListModal.vue';
import GroupActions from './list/GroupActions.vue';
import GroupPopup from './list/GroupPopup.vue';
import { IconSystem } from '@/utils/constants.js';

export default {
  name: 'ListDrawer',
  components: {
    ListActions,
    SimpleListModal,
    GroupActions,
    GroupPopup
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      listExpandedMap: {}, // 记录每个清单的展开/折叠状态
      lists: [], // 清单列表
      currentListId: '', // 当前选中的清单ID
      currentGroupId: '', // 当前选中的分组ID
      // 清单操作相关
      showActions: false,
      currentActionList: null,
      // 清单表单相关
      showListPopup: false,
      currentEditList: null,
      isEditMode: false,
      // 分组操作相关
      showGroupActionsPopup: false,
      currentActionGroup: null,
      groupListId: '', // 当前操作分组所属的清单ID
      // 分组表单相关
      showGroupPopup: false,
      currentEditGroup: null,
      isGroupEditMode: false,
      groupFormData: {
        name: ''
      }
    }
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.loadData();
      }
    }
  },
  created() {
    this.loadData();
  },
  methods: {
    // 显示优雅的提示
    showToast(message, type = 'success') {
      if (this.$refs.uToast) {
        this.$refs.uToast.show({
          title: message,
          type: type,
          icon: type === 'success' ? 'checkmark-circle' : (type === 'error' ? 'close-circle' : 'info-circle')
        });
      }
    },
    
    // 获取图标样式
    getListIconStyle(list) {
      const iconName = list.icon || 'tags';
      const color = IconSystem.getIconColor(iconName);
      return {
        backgroundColor: color,
        borderRadius: '6px'
      };
    },
    
    // 加载数据
    loadData() {
      try {
        // 初始化默认值
        this.lists = [];
        this.currentListId = '';
        this.currentGroupId = '';
        
        const store = this.$store;
        if (!store) {
          console.error('Store not available in ListDrawer');
          return;
        }
        
        // 获取清单列表
        if (store.getters && store.getters['lists/getLists']) {
          const storedLists = store.getters['lists/getLists'];
          // 确保lists是数组类型
          if (Array.isArray(storedLists)) {
            // 过滤掉无效的清单对象
            this.lists = storedLists.filter(list => list && list.id);
          } else {
            this.lists = [];
          }
        }
        
        // 获取当前选中的清单和分组
        if (store.state && store.state.lists) {
          this.currentListId = store.state.lists.currentListId || '';
          this.currentGroupId = store.state.lists.currentGroupId || '';
        }
        
        // 验证当前选中的清单是否存在
        if (this.currentListId) {
          const listExists = this.lists.some(list => list.id === this.currentListId);
          if (!listExists) {
            this.currentListId = '';
            this.currentGroupId = '';
            
            // 如果存在清单，则选择第一个作为默认
            if (this.lists.length > 0) {
              this.currentListId = this.lists[0].id;
              
              // 更新store中的选择
              if (store.dispatch) {
                store.dispatch('lists/setCurrentList', this.currentListId);
              }
            }
          }
        }
        
        // 默认展开当前选中的清单
        if (this.currentListId && !this.listExpandedMap[this.currentListId]) {
          this.$set(this.listExpandedMap, this.currentListId, true);
        }
      } catch (error) {
        console.error('加载抽屉数据失败:', error);
        // 确保lists是一个数组，即使出错
        this.lists = this.lists || [];
      }
    },
    
    // 隐藏当前活动的弹出层
    hideActivePopup() {
      if (this.showActions) {
        this.hideListActions();
      }
      if (this.showGroupActionsPopup) {
        this.hideGroupActions();
      }
    },
    
    onOpen() {
      this.$emit('open');
    },
    
    onClose() {
      this.$emit('close');
    },
    
    // 切换清单的展开/折叠状态
    toggleListExpand(list) {
      try {
        if (!list || !list.id) return;
        
        // 设置当前清单
        if (this.$store && this.$store.dispatch) {
          this.$store.dispatch('lists/setCurrentList', list.id);
        }
        this.currentListId = list.id;
        
        // 切换展开状态
        const currentExpanded = this.listExpandedMap[list.id] || false;
        this.$set(this.listExpandedMap, list.id, !currentExpanded);
        
        // 如果展开且有分组，默认选中第一个分组
        if (!currentExpanded && list.groups && list.groups.length > 0) {
          if (this.$store && this.$store.dispatch) {
            this.$store.dispatch('lists/setCurrentGroup', list.groups[0].id);
          }
          this.currentGroupId = list.groups[0].id;
        }
      } catch (error) {
        console.error('切换清单展开状态失败:', error);
      }
    },
    
    // 选择分组
    selectGroup(listId, groupId) {
      try {
        if (!listId || !groupId) return;
        
        if (this.$store && this.$store.dispatch) {
          this.$store.dispatch('lists/setCurrentList', listId);
          this.$store.dispatch('lists/setCurrentGroup', groupId);
        }
        this.currentListId = listId;
        this.currentGroupId = groupId;
        this.$emit('close'); // 选择后关闭抽屉
      } catch (error) {
        console.error('选择分组失败:', error);
      }
    },
    
    // 获取清单的任务总数
    getListTotalCount(listId) {
      try {
        if (!listId) return 0;
        
        const list = this.lists.find(l => l.id === listId);
        if (!list || !list.groups) return 0;
        
        let total = 0;
        list.groups.forEach(group => {
          if (group && group.id) {
            total += this.getGroupTotalCount(group.id);
          }
        });
        
        return total;
      } catch (error) {
        console.error('获取清单任务总数失败:', error);
        return 0;
      }
    },
    
    // 获取清单的已完成任务数
    getListCompletedCount(listId) {
      try {
        if (!listId) return 0;
        
        const list = this.lists.find(l => l.id === listId);
        if (!list || !list.groups) return 0;
        
        let completed = 0;
        list.groups.forEach(group => {
          if (group && group.id) {
            completed += this.getGroupCompletedCount(group.id);
          }
        });
        
        return completed;
      } catch (error) {
        console.error('获取清单已完成任务数失败:', error);
        return 0;
      }
    },
    
    // 获取分组的任务总数
    getGroupTotalCount(groupId) {
      try {
        if (!groupId || !this.$store || !this.$store.getters || !this.$store.getters['tasks/getTasksByGroup']) {
          return 0;
        }
        
        const tasks = this.$store.getters['tasks/getTasksByGroup'](groupId) || [];
        return tasks.length;
      } catch (error) {
        console.error('获取分组任务总数失败:', error);
        return 0;
      }
    },
    
    // 获取分组的已完成任务数
    getGroupCompletedCount(groupId) {
      try {
        if (!groupId || !this.$store || !this.$store.getters || !this.$store.getters['tasks/getTasksByGroup']) {
          return 0;
        }
        
        const tasks = this.$store.getters['tasks/getTasksByGroup'](groupId) || [];
        return tasks.filter(task => task.status === 'done').length;
      } catch (error) {
        console.error('获取分组已完成任务数失败:', error);
        return 0;
      }
    },
    
    // 显示添加清单弹窗
    showAddListPopup() {
      this.isEditMode = false;
      this.currentEditList = null;
      this.showListPopup = true;
    },
    
    // 隐藏清单弹窗
    hideListPopup() {
      this.showListPopup = false;
      this.currentEditList = null;
    },
    
    // 显示清单操作菜单
    showListActions(list) {
      if (!list || !list.id) {
        this.showToast('操作失败', 'error');
        return;
      }
      
      try {
        // 创建深拷贝以避免引用问题
        const listCopy = JSON.parse(JSON.stringify(list));
        // 确保清单对象有效
        if (!listCopy || !listCopy.id) {
          throw new Error('清单对象无效');
        }
        
        this.currentActionList = listCopy;
        this.showActions = true;
      } catch (error) {
        console.error('处理清单操作失败:', error);
        this.showToast('操作失败', 'error');
      }
    },
    
    // 隐藏清单操作菜单
    hideListActions() {
      // 先隐藏菜单UI
      this.showActions = false;
      
      // 延迟清空对象，确保动画完成后再清空状态
      setTimeout(() => {
        this.currentActionList = null;
      }, 300);
    },
    
    // 编辑清单
    editList(list) {
      if (!list || !list.id) {
        this.showToast('清单数据无效', 'error');
        return;
      }
      
      this.isEditMode = true;
      this.currentEditList = list;
      this.showListPopup = true;
    },
    
    // 添加分组
    addGroup(list) {
      if (list && list.id) {
        this.showAddGroupPopup(list.id);
      } else {
        this.showToast('清单数据无效', 'error');
      }
    },
    
    // 处理删除清单事件
    onDeleteList(listId) {
      try {
        // 确保listId是有效的
        if (!listId) {
          throw new Error('无效的清单ID');
        }
        
        // 检查listId类型，确保它是字符串
        if (typeof listId !== 'string') {
          listId = String(listId);
        }
        
        // 调用删除方法
        this.deleteList(listId);
      } catch (error) {
        console.error('删除清单失败:', error);
        this.showToast('删除失败', 'error');
      }
    },
    
    // 删除清单
    deleteList(listId) {
      try {
        // 检查listId是否有效
        if (!listId) {
          this.showToast('删除失败', 'error');
          return;
        }
        
        // 检查store是否可用
        if (!this.$store || !this.$store.dispatch) {
          this.showToast('系统错误', 'error');
          return;
        }
        
        // 先获取要删除的清单信息，用于提示消息
        const listToDelete = this.lists.find(list => list.id === listId);
        if (!listToDelete) {
          this.showToast('清单不存在', 'error');
          return;
        }
        
        // 保存清单标题，避免后面引用已删除对象
        const listTitle = listToDelete.title || '清单';
        
        // 保存需要删除的分组ID
        const groupIds = [];
        if (listToDelete.groups && listToDelete.groups.length > 0) {
          listToDelete.groups.forEach(group => {
            if (group && group.id) {
              groupIds.push(group.id);
            }
          });
        }
        
        // 删除与清单相关的任务
        if (groupIds.length > 0) {
          groupIds.forEach(groupId => {
            try {
              this.$store.dispatch('tasks/deleteTasksByGroupId', groupId);
            } catch (e) {
              console.error('删除分组任务失败:', e);
            }
          });
        }
        
        // 删除清单
        this.$store.dispatch('lists/deleteList', listId);
        
        // 重新加载数据
        setTimeout(() => {
          this.loadData();
        }, 100);
        
        this.showToast(`${listTitle}已删除`);
      } catch (error) {
        console.error('删除清单失败:', error);
        this.showToast('删除清单失败', 'error');
      }
    },
    
    // 提交清单表单
    submitListForm(listData) {
      try {
        if (!this.$store || !this.$store.dispatch) {
          throw new Error('Store not available');
        }
        
        if (!listData || (this.isEditMode && !listData.id)) {
          throw new Error('清单数据无效');
        }
        
        // 先关闭弹窗
        this.hideListPopup();
        
        if (this.isEditMode) {
          // 编辑模式
          this.$store.dispatch('lists/updateList', listData);
          this.showToast('清单已更新');
        } else {
          // 新建模式
          this.$store.dispatch('lists/createList', listData);
          this.showToast('清单已创建');
        }
        
        // 重新加载数据
        this.loadData();
      } catch (error) {
        console.error('保存清单失败:', error);
        this.showToast('保存清单失败', 'error');
      }
    },
    
    // 显示分组操作菜单
    showGroupActions(listId, group) {
      if (!group || !group.id || !listId) {
        this.showToast('操作失败', 'error');
        return;
      }
      
      try {
        // 创建深拷贝以避免引用问题
        const groupCopy = JSON.parse(JSON.stringify(group));
        // 确保分组对象有效
        if (!groupCopy || !groupCopy.id) {
          throw new Error('分组对象无效');
        }
        
        this.currentActionGroup = groupCopy;
        this.groupListId = listId;
        this.showGroupActionsPopup = true;
      } catch (error) {
        console.error('处理分组操作失败:', error);
        this.showToast('操作失败', 'error');
      }
    },
    
    // 隐藏分组操作菜单
    hideGroupActions() {
      // 先隐藏菜单UI
      this.showGroupActionsPopup = false;
      
      // 延迟清空对象，确保动画完成后再清空状态
      setTimeout(() => {
        this.currentActionGroup = null;
        // 不要清空groupListId，因为编辑分组时需要用到
      }, 300);
    },
    
    // 显示添加分组弹窗
    showAddGroupPopup(listId) {
      if (!listId) {
        this.showToast('操作失败', 'error');
        return;
      }
      
      this.isGroupEditMode = false;
      this.currentEditGroup = null;
      this.groupListId = listId;
      
      // 重置表单数据
      this.groupFormData = {
        name: ''
      };
      
      this.showGroupPopup = true;
    },
    
    // 编辑分组
    editGroup(group) {
      if (!group || !group.id) {
        this.showToast('操作失败', 'error');
        return;
      }
      
      // 如果groupListId为空，尝试从当前清单中查找
      if (!this.groupListId) {
        // 查找包含该分组的清单
        const listWithGroup = this.lists.find(list => 
          list.groups && list.groups.some(g => g.id === group.id)
        );
        
        if (listWithGroup) {
          this.groupListId = listWithGroup.id;
        } else {
          this.showToast('无法确定分组所属清单', 'error');
          return;
        }
      }
      
      this.isGroupEditMode = true;
      this.currentEditGroup = group;
      
      // 设置表单数据
      this.groupFormData = {
        name: group.name || ''
      };
      
      this.showGroupPopup = true;
    },
    
    // 隐藏分组弹窗
    hideGroupPopup() {
      this.showGroupPopup = false;
      this.currentEditGroup = null;
      // 不要在这里清空groupListId，因为可能还需要用于提交表单
    },
    
    // 处理删除分组事件
    onDeleteGroup(groupId) {
      try {
        // 确保groupId和listId是有效的
        if (!groupId || !this.groupListId) {
          throw new Error('无效的分组ID或清单ID');
        }
        
        // 调用删除方法
        this.deleteGroup(this.groupListId, groupId);
      } catch (error) {
        console.error('删除分组失败:', error);
        this.showToast('删除失败', 'error');
      }
    },
    
    // 删除分组
    deleteGroup(listId, groupId) {
      try {
        // 检查参数是否有效
        if (!listId || !groupId) {
          this.showToast('删除失败', 'error');
          return;
        }
        
        // 检查store是否可用
        if (!this.$store || !this.$store.dispatch) {
          this.showToast('系统错误', 'error');
          return;
        }
        
        // 先获取要删除的分组信息，用于提示消息
        const list = this.lists.find(list => list.id === listId);
        if (!list || !list.groups) {
          this.showToast('清单不存在', 'error');
          return;
        }
        
        const groupToDelete = list.groups.find(group => group.id === groupId);
        if (!groupToDelete) {
          this.showToast('分组不存在', 'error');
          return;
        }
        
        // 保存分组名称，避免后面引用已删除对象
        const groupName = groupToDelete.name || '分组';
        
        // 删除与分组相关的任务
        try {
          this.$store.dispatch('tasks/deleteTasksByGroupId', groupId);
        } catch (e) {
          console.error('删除分组任务失败:', e);
        }
        
        // 删除分组
        this.$store.dispatch('lists/deleteGroup', { listId, groupId });
        
        // 重新加载数据
        setTimeout(() => {
          this.loadData();
        }, 100);
        
        this.showToast(`${groupName}已删除`);
      } catch (error) {
        console.error('删除分组失败:', error);
        this.showToast('删除分组失败', 'error');
      }
    },
    
    // 提交分组表单
    submitGroupForm() {
      try {
        if (!this.$store || !this.$store.dispatch || !this.groupListId) {
          throw new Error('Store not available or listId invalid');
        }
        
        // 验证表单数据
        if (!this.groupFormData.name || this.groupFormData.name.trim() === '') {
          this.showToast('分组名称不能为空', 'error');
          return;
        }
        
        // 构建分组数据
        const groupData = {
          name: this.groupFormData.name.trim()
        };
        
        // 如果是编辑模式，添加ID
        if (this.isGroupEditMode && this.currentEditGroup && this.currentEditGroup.id) {
          groupData.id = this.currentEditGroup.id;
        }
        
        // 先关闭弹窗
        this.hideGroupPopup();
        
        if (this.isGroupEditMode) {
          // 编辑模式
          this.$store.dispatch('lists/updateGroup', { 
            listId: this.groupListId, 
            groupData 
          });
          this.showToast('分组已更新');
        } else {
          // 新建模式
          this.$store.dispatch('lists/createGroup', { 
            listId: this.groupListId, 
            groupData 
          });
          this.showToast('分组已创建');
        }
        
        // 重新加载数据
        this.loadData();
        
        // 清空临时存储的listId
        this.groupListId = '';
      } catch (error) {
        console.error('保存分组失败:', error);
        this.showToast('保存分组失败', 'error');
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.list-drawer-container {
  position: relative;
}

.drawer-container {
  width: 250px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--background-color);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 101;
}

/* 自定义半透明覆盖层，只覆盖右侧部分 */
.custom-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 98; /* 降低z-index，确保不会覆盖操作菜单 */
  transition: all 0.2s ease;
}

/* 为了让遮罩只覆盖右侧，添加左侧透明区域 */
.custom-mask::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background-color: transparent;
  z-index: 100;
}

/* 操作菜单专用遮罩层 */
.action-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999; /* 高于抽屉但低于操作菜单 */
}

/* 弹窗专用遮罩层 */
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000; /* 高于操作菜单遮罩但低于弹窗 */
}

.drawer-header {
  padding: 20px 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: linear-gradient(to right, #f8f8f8, #ffffff);
}

.drawer-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-color);
}

.drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 5px 0;
}

.list-container {
  margin-bottom: 5px;
}

.list-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
  
  &:active {
    background-color: rgba(0, 0, 0, 0.05);
  }
}

.list-item-active {
  background-color: rgba(66, 133, 244, 0.05);
  border-left: 3px solid #4285f4;
}

.list-icon-box {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.list-icon-wrapper {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.95);
  }
}

.list-info {
  flex: 1;
  display: flex;
  align-items: center;
}

.list-title {
  font-size: 15px;
  color: var(--text-color);
  transition: color 0.2s ease;
}

.list-title-active {
  color: #4285f4;
  font-weight: 500;
}

.list-count-wrapper {
  background-color: #f0f0f0;
  border-radius: 10px;
  padding: 2px 6px;
  margin-left: 5px;
}

.list-count {
  font-size: 12px;
  color: #666;
}

.group-container {
  margin-left: 30px;
  margin-top: 5px;
}

.group-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  cursor: pointer;
  margin: 5px 10px 5px 0;
  border-radius: 6px;
  background-color: #f8f8f8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  
  &:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
}

.group-item-active {
  background-color: #e8f0fe;
  border-left: 3px solid #4285f4;
  box-shadow: 0 2px 5px rgba(66, 133, 244, 0.15);
}

.group-icon-box {
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.group-info {
  flex: 1;
  display: flex;
  align-items: center;
}

.group-title {
  font-size: 14px;
  color: var(--text-color);
  transition: color 0.2s ease;
}

.group-title-active {
  color: #4285f4;
  font-weight: 500;
}

.group-count-wrapper {
  background-color: rgba(66, 133, 244, 0.1);
  border-radius: 10px;
  padding: 2px 6px;
  margin-left: 5px;
}

.group-count {
  font-size: 12px;
  color: #4285f4;
}

.drawer-footer {
  padding: 15px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  background: linear-gradient(to right, #f8f8f8, #ffffff);
}

.add-list-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 20px;
  background-color: #4285f4;
  box-shadow: 0 2px 5px rgba(66, 133, 244, 0.3);
  transition: all 0.3s ease;
  
  &:active {
    transform: translateY(1px);
    box-shadow: 0 1px 3px rgba(66, 133, 244, 0.2);
  }
}

.add-list-text {
  font-size: 14px;
  color: #fff;
  margin-left: 5px;
  font-weight: 500;
}

.add-group-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  margin: 5px 10px 5px 0;
  border-radius: 6px;
  background-color: #f8f8f8;
  border: 1px dashed #ccc;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:active {
    background-color: #eaeaea;
  }
}

.add-group-text {
  font-size: 14px;
  color: #999;
  margin-left: 8px;
}
</style> 